<template>
  <div class="table">
    <el-button @click="resetData">重置数据</el-button>
    <el-button @click="resetTable">重置表格</el-button>
    <el-table :data="tableData" style="width: 100%" @cell-click="handle">
      <el-table-column prop="姓名" label="姓名" width="150">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.姓名"
            placeholder="请输入姓名"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="一传">
        <el-table-column prop="到位" label="到位" width="80">
          <template slot-scope="scope">
            <div
              @click="goclick1(scope.row, 1)"
              style="float: left; width: 80%"
            >
              {{ scope.row.到位 }}
            </div>
            <el-button
              style="float: right; width: 10%"
              @click="goclick1(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="半到位" label="半到位" width="80">
          <template slot-scope="scope">
            <div @click="goclick2(scope.row, 1)">{{ scope.row.半到位 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick2(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="不到位" label="不到位" width="80">
          <template slot-scope="scope">
            <div @click="goclick3(scope.row, 1)">{{ scope.row.不到位 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick3(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="失误" label="失误" width="80">
          <template slot-scope="scope">
            <div @click="goclick4(scope.row, 1)">{{ scope.row.失误 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick4(scope.row, -1)"
              >-1</el-button
            >
          </template></el-table-column
        >
      </el-table-column>
      <el-table-column label="进攻">
        <el-table-column prop="得分" label="得分" width="80">
          <template slot-scope="scope">
            <div @click="goclick5(scope.row, 1)">{{ scope.row.得分 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick5(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="进攻失误" label="进攻失误" width="80">
          <template slot-scope="scope">
            <div @click="goclick6(scope.row, 1)">{{ scope.row.进攻失误 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick6(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="普通进攻" label="普通进攻" width="80">
          <template slot-scope="scope">
            <div @click="goclick7(scope.row, 1)">{{ scope.row.普通进攻 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick7(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="发球">
        <el-table-column prop="ACE" label="ACE" width="80">
          <template slot-scope="scope">
            <div @click="goclick8(scope.row, 1)">{{ scope.row.ACE }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick8(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="发球失误" label="发球失误" width="80">
          <template slot-scope="scope">
            <div @click="goclick9(scope.row, 1)">{{ scope.row.发球失误 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick9(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="普通发球" label="普通发球" width="80">
          <template slot-scope="scope">
            <div @click="goclick10(scope.row, 1)">{{ scope.row.普通发球 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick10(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="防守" label="防守" width="80">
        <template slot-scope="scope">
          <div @click="goclick11(scope.row, 1)">{{ scope.row.防守 }}</div>
          <el-button
            style="float: right; width: 20%"
            @click="goclick11(scope.row, -1)"
            >-1</el-button
          >
        </template></el-table-column
      >
      <el-table-column label="拦网">
        <el-table-column prop="拦网得分" label="拦网得分" width="80">
          <template slot-scope="scope">
            <div @click="goclick12(scope.row, 1)">{{ scope.row.拦网得分 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick12(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="拦回" label="拦回/撑起" width="80">
          <template slot-scope="scope">
            <div @click="goclick13(scope.row, 1)">{{ scope.row.拦回 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick13(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="其他">
        <el-table-column prop="其他得分" label="其他得分" width="80">
          <template slot-scope="scope">
            <div @click="goclick14(scope.row, 1)">{{ scope.row.其他得分 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick14(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="技术失误" label="技术失误" width="80">
          <template slot-scope="scope">
            <div @click="goclick15(scope.row, 1)">{{ scope.row.技术失误 }}</div>
            <el-button
              style="float: right; width: 20%"
              @click="goclick15(scope.row, -1)"
              >-1</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
      ],
    };
  },
  mounted() {
    if (sessionStorage.getItem("tableData")) {
      this.tableData = JSON.parse(sessionStorage.getItem("tableData"));
      console.log(this.tableData);
    }
  },
  methods: {
    resetData(){
      for(var item in this.tableData){
        this.tableData[item].到位 = 0;
        this.tableData[item].半到位 = 0;
        this.tableData[item].不到位 = 0;
        this.tableData[item].失误 = 0;
        this.tableData[item].得分 = 0;
        this.tableData[item].进攻失误 = 0;
        this.tableData[item].普通进攻 = 0;
        this.tableData[item].ACE = 0;
        this.tableData[item].发球失误 = 0;
        this.tableData[item].普通发球 = 0;
        this.tableData[item].防守 = 0;
        this.tableData[item].拦网得分 = 0;
        this.tableData[item].拦回 = 0;
        this.tableData[item].其他得分 = 0;
        this.tableData[item].技术失误 = 0;
      }
      this.save();
    },
    resetTable(){
      this.tableData = [
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
        {
          姓名: "",
          到位: 0,
          半到位: 0,
          不到位: 0,
          失误: 0,
          得分: 0,
          进攻失误: 0,
          普通进攻: 0,
          ACE: 0,
          发球失误: 0,
          普通发球: 0,
          防守: 0,
          拦网得分: 0,
          拦回: 0,
          其他得分: 0,
          技术失误: 0,
        },
      ]
      this.save();
    },
    save() {
      sessionStorage.setItem("tableData", JSON.stringify(this.tableData));
    },
    goclick1(address, num) {
      address.到位 = address.到位 + num;
      this.save();
    },
    goclick2(address, num) {
      address.半到位 = address.半到位 + num;
      this.save();
    },
    goclick3(address, num) {
      address.不到位 = address.不到位 + num;
      this.save();
    },
    goclick4(address, num) {
      address.失误 = address.失误 + num;
      this.save();
    },
    goclick5(address, num) {
      address.得分 = address.得分 + num;
      this.save();
    },
    goclick6(address, num) {
      address.进攻失误 = address.进攻失误 + num;
      this.save();
    },
    goclick7(address, num) {
      address.普通进攻 = address.普通进攻 + num;
      this.save();
    },
    goclick8(address, num) {
      address.ACE = address.ACE + num;
      this.save();
    },
    goclick9(address, num) {
      address.发球失误 = address.发球失误 + num;
      this.save();
    },
    goclick10(address, num) {
      address.普通发球 = address.普通发球 + num;
      this.save();
    },
    goclick11(address, num) {
      address.防守 = address.防守 + num;
      this.save();
    },
    goclick12(address, num) {
      address.拦网得分 = address.拦网得分 + num;
      this.save();
    },
    goclick13(address, num) {
      address.拦回 = address.拦回 + num;
      this.save();
    },
    goclick14(address, num) {
      address.其他得分 = address.其他得分 + num;
      this.save();
    },
    goclick15(address, num) {
      address.技术失误 = address.技术失误 + num;
      this.save();
    },
  },
};
</script>

<style scoped>
.table {
  width: 90%;
  margin: 0px auto;
  text-align: center;
}
</style>
